import React from 'react';
import { Menu, Button } from 'antd';


import menus from '../router/menu'
import { filterByPermission } from '../utils/util'
import { Link } from 'react-router-dom';
let userRole = 'user'
const { SubMenu } = Menu;

let renderAry = filterByPermission(menus, userRole)
function renderTreeByList(arr) {
  return arr.map(item => {
    let Icon = item.icon;
    if (item.children) {
      return <SubMenu key={item.key} icon={Icon ? <Icon /> : <></>} title={item.title}>
        {renderTreeByList(item.children)}
      </SubMenu>
    } else {
      return <Menu.Item key={item.key} icon={Icon ? <Icon /> : <></>}>
        <Link to={item.key}>{item.title}</Link>
      </Menu.Item>
    }
  })
}

function getOpenKey(ary) {
  let temp = []
  ary.forEach(item => {
    temp.push(item.key)
  })
  return temp;
}
class MyNav extends React.Component {

  render() {
    return <div >
      <Menu
        defaultSelectedKeys={this.props.location.pathname}
        selectedKeys={this.props.location.pathname}
        defaultOpenKeys={getOpenKey(renderAry)}
        mode="inline"
        theme="dark"
      >
        {renderTreeByList(renderAry)}
      </Menu>
    </div>
  }
}
export default MyNav